import { Tabs } from "antd-mobile"
import { useTabs } from "./useTabs"
import HomeList from "./HomeList"
import "./style.css"

const Home = () => {
  const { channels } = useTabs()

  return (
    <>
      <div className="tabContainer">
        <Tabs defaultActiveKey={"0"}>
          {channels.map(item => {
            return (
              <Tabs.Tab title={item.name} key={item.id}>
                <div className="listContainer">
                  <HomeList channelId={"" + item.id} />
                </div>
              </Tabs.Tab>
            )
          })}
        </Tabs>
      </div>
    </>
  )
}

export default Home
